<template>
  <!-- 遮罩层 -->
  <div class="mask" v-if="show" @click.self="hide">
    <slot></slot>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  props: {
    show: { //遮罩层显隐状态
      type: Boolean,
      default: false
    }
  },

  data() {
    return({

    })
  },
  methods: {
    hide: function () {  //点击遮罩层触发事件
      this.$emit('hide', false)
    }
  }
  
}
</script>

<style scoped lang="stylus">

.mask
  position fixed
  top 0
  bottom 0
  left 0
  right 0
  background-color rgba(0, 0, 0, .2)
  z-index 99

</style>
